<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: DESKTOP-3LI1LES
 * @LastEditTime: 2021-08-07 19:44:16
-->
<template>
<div class="list">
  <!-- 头部 -->
  <Head></Head>
        <!-- <div class="header_bottom">
         <ul class="menu">
            <li :class="$route.query.name==c.name?'current':''" 
              v-for="c in first_cas" 
              @click="toListHandler(c)"
              :key="c.id"></li>
          </ul>
      </div> -->
  <!-- /头部 -->
<!-- 体部 -->
<!-- 呈现加载效果 -->
<div class="content" v-loading="loading">
      <div class="wrapper">
        <!-- {{category}} -->
        <!-- {{category.children}} -->
        <img src="./../assets/listbanner.png" alt="">
        <!-- <div class="page_title">{{category.name?category.name:'hide()'}}</div> -->
        <div class="page_title" v-if="category.name!=''">{{category.name}}</div>

        <div class="inner_content">
          <!-- 左侧导航栏 -->
          <div class="rank">
            <!-- <div class="title">热门</div> -->
            <!-- <ul class="articles">
               <li v-for="c in categories" 
                  @click="toListHandler(c)"
                  :key="c.parentId">{{c.name}}</li>
            </ul> -->
            <ul class="articles" 
                  v-for="c in categories" 
                  @click="toListHandler(c)"
                  :key="c.id">
               <li>{{c.name}}</li>
            </ul>
          </div>
          <!-- 右侧列表 -->
          <div class="articles">
            <div class="position">
            <span>{{category.name}}</span>
            <span>
              当前位置：首页->{{category.name}}
            </span>
            </div>
            <!-- 下划线 -->
            <hr>
            <!-- 文章列表 -->
            <ul v-if="articleData.total > 1">
              <li class="article" 
                @click="toArticleHandler(a.id)"
                v-for="a in articleData.list" :key="a.id">
                <div class="title">{{a.title}}</div>
                <div>
                  <span>{{a.publishTime | fmtDate}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{a.readTimes}}</span>
                </div>
              </li>
            </ul>
            <div v-else-if="articleData.total ==1" tyle="text-align:center;color:red;padding:2em">
              <div v-html="articleData.list[0].content"></div> 
            </div> 
            <div v-else style="text-align:center;color:red;padding:2em">
              暂无数据
            </div>
            <!-- /文章列表 -->
            <!-- 分页 -->
            <div class="page">
               <el-pagination
                background
                layout="prev, pager, next"
                hide-on-single-page
                @current-change="pageChangeHandler"
                :page-size="articleData.pageSize"
                :total="articleData.total">
              </el-pagination>
            </div>
            <!-- /分页 -->
          </div>
          <!-- /右侧列表 -->
        </div>
        <!-- 左侧内容 -->
      </div>
    </div>
<!--/ 体部 -->
<!--底部 -->
  <Foot></Foot>
<!--/ 底部 -->
</div>
</template>
<script>
import {get} from '../utils/request'
import Head from './components/Head.vue'
import Foot from './components/Foot.vue'
export default {
  components:{
    Head,
    Foot
  },
  data(){
    return {
      loading:false,
      category:{},
      categories:[],
      first_cas:[],
      tabPosition: 'left',
      param:{
        page:1,
        pageSize:5
      },
      articleData:{
        list:[]
      }
    }
  },
  watch:{
    '$route.query':{
      handler(query){
        this.category = query;
        this.loadArticles();
      },
      deep:true
    }
  },
  created(){
    // 获取参数
    this.category = this.$route.query;
    this.loadCategories();
    this.loadArticles();
    this.toListHandler();
    this.first_loadCategories();
    
  },
  methods:{
    toArticleHandler(id){
      this.$router.push({path:'/article',query:{id}})
    },
        // 跳转
    toListHandler(c){
      // 跳转  通过路由 router 进行页面跳转
      this.$router.push({
        path:'/list',
        // query   表示查询字符串
        query:c
      })
    },
    // 头部一级标题
    first_loadCategories(){
      let url = '/index/category/findCategoryTree'
      get(url).then(resp => {
        this.first_cas = resp.data;
      })
    },
        // 加载栏目信息
    loadCategories(){
      this.loading=true;
      let url = '/index/category/findByParentId'
      // this.id=this.categories.parentId;
      let parentId = this.category.id;
      get(url,{parentId}).then(resp => {
        this.categories = resp.data; 
        // this.categories.id = resp.data.parentId;
      }).finally(()=>{
        this.loading=false;
      })
    },
     
    pageChangeHandler(page){
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles(){
      this.loading = true;
      let url = "/index/article/pageQuery"
      this.param.categoryId = this.category.id;
      get(url,this.param).then(resp => {
        this.articleData = resp.data;
      }).finally(()=> {
        this.loading = false;
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 变量
$color_primary:#028b39;
.list {
  .content {
    background-color: #ecf6f2;
    padding: 0 0;
    img{
      width:98.6%;
      padding-bottom: 0;
    }
    .page_title {
      padding:0;
      font-size: 18px;
      padding:1em 3em;
      font-weight: bold;
      color: #fff;
      position: relative;
      background-color: $color_primary;
      bottom: 6em;
      width: 8%;
    }

    .inner_content {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      & > div {
        background-color: #fff;
        border-radius: 5px;
        padding: 1em .5em;
        min-height: 500px;
      }
      .articles{
        flex: 1;
        margin-right: 1em;
        &>.position>span:first-child{
          font-size: 24px;
          font-weight: bold;
          color: $color_primary;
          line-height: 2em;
          padding-left: 0;
        }
        &>.position>span:nth-child(2){
          line-height: 2em;
          padding-left: 50%;
        }
        &>li{
          padding: .5em 0 ;
          text-align: center;
          border-bottom: 1px solid #ededed;
        }
        &> li:hover{
          cursor: pointer;
          background-color: aquamarine;
        }

        ul > li.article {
          padding: .5em 0;
          border-bottom: 1px solid #ededed;
          cursor: pointer;
          & > div {
            line-height: 1.8em;
          }
          .title {
            cursor: pointer;
          }
        }
        .page {
          padding:.5em 0;
          text-align: center;
        }
        & > .article{
          padding:1em 3em;
          border-bottom:1px solid gray;
          text-align: center;
        }
      }
      .rank {
        flex-basis: 200px;
        position: relative;
        // .title {
        //   position: absolute;
        //   left: 0;
        //   top: -1em;
        //   background-color: #ff7800;
        //   color:#fff;
        //   width: 4em;
        //   line-height: 1.6em;
        //   font-size: 18px;
        //   text-align: center;
        // }
      }
      
    }
  }
}
</style>